import React, { useEffect } from 'react'
import useKeepState from 'use-keep-state'
import { Modal, Form, Input, Select } from 'antd'
import {
  serviceCreateCapitalFlowType,
  serviceUpdateCapitalFlowType,
} from '../../../request/capitalflow'
import { TYPES } from './enum'

type Props = {
  visible: boolean
  onSuccess: (res?: any) => void
  onCancel: () => void
  rowData: { [key: string]: any } | null
}

const { Option } = Select
const initialState = {
  confirmLoading: false,
}
const CreateType: React.FC<Props> = function ({
  visible,
  rowData,
  onCancel,
  onSuccess,
}: Props) {
  const [form] = Form.useForm()
  const [state, setState] = useKeepState(initialState)

  async function handleSubmitForm() {
    try {
      const values = await form.validateFields()
      const params = {
        type: values.type,
        name: values.name.trim(),
      }
      setState({ confirmLoading: true })
      ;(rowData
        ? serviceUpdateCapitalFlowType(rowData.id, params)
        : serviceCreateCapitalFlowType(params)
      )
        .then(res => {
          if (res.data.success) onSuccess(res.data.data)
        })
        .finally(() => {
          setState({ confirmLoading: false })
        })
    } catch {}
  }
  useEffect(() => {
    if (visible && rowData) {
      form.setFieldsValue({
        name: rowData.name,
        type: rowData.type,
      })
    }
  }, [visible, rowData])

  useEffect(() => {
    if (!visible) {
      form.resetFields()
    }
  }, [visible])

  return (
    <Modal
      title="新增类别"
      visible={visible}
      onOk={handleSubmitForm}
      onCancel={onCancel}
      confirmLoading={state.confirmLoading}
      forceRender
      maskClosable={false}
    >
      <Form form={form}>
        <Form.Item
          label="名称"
          name="name"
          rules={[{ required: true, message: '请输入类别名称' }]}
        >
          <Input maxLength={20} placeholder="请输入类别名称"></Input>
        </Form.Item>
        <Form.Item
          label="类别"
          name="type"
          rules={[{ required: true, message: '请选择类型' }]}
        >
          <Select>
            {TYPES.map(item => (
              <Option value={item.value} key={item.value}>
                {item.name}
              </Option>
            ))}
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default React.memo(CreateType)
